<template>
   <div class="app-container">
       <div class="item hauto ld">
            <fieldset>
            <legend>采购信息</legend>
            <div class="fd-content">
                <div class="fd-item">
                    <span class="name">采购渠道：</span><span class="value">{{customerName}}</span>
                    <span class="name">采购人：</span><span class="value">{{phone}}</span>
                </div>
                <div class="fd-item">
                    <span class="name">采购订单编号：</span><span class="value">{{customerGender}}</span>
                    <span class="name">支付通知单号：</span><span class="value">{{customerWeixin}}</span>
                </div>
                <div class="fd-item">
                    <span class="name">供应商名称</span><span class="value">{{customerGender}}</span>
                    <span class="name">采购日期：</span><span class="value">{{customerWeixin}}</span>
                </div>
            </div>
            </fieldset>
        </div>
        <div class="item hauto ld">
            <fieldset>
            <legend>车辆信息</legend>
            <div class="fd-content">
                <div class="fd-item">
                    <span class="name">具体车型：</span><span class="value">{{customerName}}</span>
                    <span class="name">VIN码：</span><span class="value">{{phone}}</span>
                </div>
                <div class="fd-item">
                    <span class="name">颜色：</span><span class="value">{{customerGender}}</span>
                    <span class="name">价格：</span><span class="value">{{customerWeixin}}</span>
                </div>
                <div class="fd-item">
                    <span class="name">发动机号：</span><span class="value">{{customerGender}}</span>
                    <span class="name"></span><span class="value">{{customerWeixin}}</span>
                </div>
            </div>
            </fieldset>
        </div>
        <div class="item hauto ld">
            <fieldset>
            <legend>价格信息</legend>
            <div class="fd-content">
                <div class="fd-item">
                    <span class="name">含税价格：</span><span class="value">{{customerName}}</span>
                    <span class="name">返利：</span><span class="value">{{phone}}</span>
                </div>
                <div class="fd-item">
                    <span class="name">出售价格：</span><span class="value">{{customerGender}}</span>
                    <span class="name"></span><span class="value">{{customerWeixin}}</span>
                </div>
            </div>
            </fieldset>
        </div>
        <div class="item hauto ld">
            <fieldset>
            <legend>操作历史记录</legend>
            <div class="fd-content">
                <div class="fd-item">
                    <span class="name">2021-01-05</span><span class="value">借车</span>
                </div>
                <div class="fd-item">
                    <span class="name">2021-02-05</span><span class="value">借车归还</span>
                </div>
                <div class="fd-item">
                    <span class="name">2021-02-06</span><span>卖出</span>
                </div>
            </div>
            </fieldset>
        </div>
        
   </div>
</template>

<script>

import * as receptionApi from '@/api/presale/reception'

export default {
    data(){
        return {
            id:'',
            phone:'',
            starttime:'',
            endtime:'',
            customerName:'',
            customerGender:1,
            customerWeixin:'',
            customerSource:0,
            customerAddress:'',
            buytimes:0,
            contactType:0,
            visitorNumber:0,
            guider:'',
            intentionCar:'',
            intentionPrice:0,
            shopPrice:0,
            remark:'',
        }
    },
    created(){
        this.id=this.$route.params.id || '';
        this.fetchData();
    },
    methods:{
        fetchData(){
            var that=this;
            receptionApi.getRecordDetails({id:that.id}).then(res=>{
                if(res.data){
                    for(var key in that){
                        if(res.data[key.toLowerCase()]!==undefined){
                            that[key]=res.data[key.toLowerCase()];
                        }
                    }
                }
            })
        }
    }
}
</script>

<style scoped>
  .item.ld{
        padding:5px 10px;margin-bottom:20px;
    }
   .item.ld>fieldset{
        width:100%;
    }
    .fd-content>.fd-item{
        padding:5px 10px; display: flex; 
    }
    .fd-content>.fd-item>span.name{
        width:100px; display: flex; align-items: center;
        color:#999;
    }
    .fd-content>.fd-item>span.value{
        width:300px; display: flex; align-items: center;
    }
</style>